Teok To Me is a mental health app which helps users to release stress by guiding users to do breathing exercise with a variety choices of music. It’s just a 3-step process.
Time Line
January 2022 – May 2022
My Role
UX UI Designer/ Graphic Designer/ Front-End Developer
Tools
Figma, Adobe Illustrator, Next JS, Github, VS Code
Understanding the Problem
Mental health encompasses an individual’s emotional, psychological, and social well-being, which can significantly impact how they think, feel, and behave. Unfortunately, many people face various levels of mental health problems, with stress, depression, and anxiety being the most common their websiteconditions. These conditions can have a detrimental effect on an individual’s routine, making it challenging to cope with daily life. In response to this issue, we developed an app designed to provide individuals with a calming moment and deep relaxation. Our app offers a combination of music and breathing exercises to help users destress and improve their mental health. We hope our app will help individuals to manage their stress and anxiety, leading to improved mental health and overall well-being.
Design Process
Low-fi Wireframe
Our team designed a low-fi wireframe of our app that help users relax and reduce stress. At first, we designed our app to provide 3 different services: Relaxation, Journal, and Quiz. However, due to limited time scope of this project, we decided to only focus on the “Relaxation” part where it helps users to choose the right background music and breath along our mascot, Teok.
Graphic Designs
We created a mascot, Teok, to approach friendly to the users. “Teok” is a Korean word which means rice cake. Rice cake is soft and the shape is elastic. We use Teok for our app name because we want to give people a sense of comfort and also “Teok” sounds like “talk” in English.
Usability Testing
Our team tested a group of BCIT students with the age range of 18 – 25. The feedbacks was positive about the general layout. However, we received some suggestions about the UI design and our team improved the web app to provide better performance.
Major Problems
- The home button does not look clickable and does not pop out
- The fonts are too small
- The font type inside the dialogue bubble does not look easy to read and too packed
- The colours of status of progress bar
- The sizes of some of the buttons are too small
Final Design
Choosing background music to relax
- Choose between Natural or Instrumental sounds
- Pick the duration of the sound you have chosen to relax.
- Take a moment to go through deep relaxation while listen to the song and do breathing exercise.
Getting tips when you are unsure what to choose
- Take a short quiz, if you are not sure about what music you want to hear.
- Within the result, Pick the duration of the sound you have chosen to relax.
- Take a moment to go through deep relaxation while listen to the song and do breathing exercise.
